<template>
    <div class="ec-dashboard">
        <panel-group />
        <!-- 待处理事务 -->
        <div class="ec-dashboard--table">
            <h2 class="font16">待处理事务</h2>
            <div style="padding: 10px 0 25px">
                <el-row :gutter="40" class="ec-dashboard--row">
                    <el-col :xs="12" :sm="12" :lg="8">
                        <el-row>
                            <el-col :lg="12">代付款订单</el-col>
                            <el-col :lg="12" class="text-right">（<span class="color-red">10</span>）</el-col>
                        </el-row>
                    </el-col>
                    <el-col :xs="12" :sm="12" :lg="8">
                        <el-row>
                            <el-col :lg="12">已完成订单</el-col>
                            <el-col :lg="12" class="text-right">（<span class="color-red">10</span>）</el-col>
                        </el-row>
                    </el-col>
                    <el-col :xs="12" :sm="12" :lg="8">
                        <el-row class="ec-dashboard--row">
                            <el-col :lg="12">待处理退款申请</el-col>
                            <el-col :lg="12" class="text-right">（<span class="color-red">10</span>）</el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row :gutter="40" class="ec-dashboard--row">
                    <el-col :xs="12" :sm="12" :lg="8">
                        <el-row class="ec-dashboard--row">
                            <el-col :lg="12">待发货订单</el-col>
                            <el-col :lg="12" class="text-right">（<span class="color-red">10</span>）</el-col>
                        </el-row>
                    </el-col>
                    <el-col :xs="12" :sm="12" :lg="8">
                        <el-row class="ec-dashboard--row">
                            <el-col :lg="12">待处理退货订单</el-col>
                            <el-col :lg="12" class="text-right">（<span class="color-red">10</span>）</el-col>
                        </el-row>
                    </el-col>
                    <el-col :xs="12" :sm="12" :lg="8">
                    </el-col>
                </el-row>
                <el-row :gutter="40" class="ec-dashboard--row">
                    <el-col :xs="12" :sm="12" :lg="8">
                        <el-row>
                            <el-col :lg="12">已发货订单</el-col>
                            <el-col :lg="12" class="text-right">（<span class="color-red">10</span>）</el-col>
                        </el-row>
                    </el-col>
                    <el-col :xs="12" :sm="12" :lg="8">
                        <el-row>
                            <el-col :lg="12">待确认订单</el-col>
                            <el-col :lg="12" class="text-right">（<span class="color-red">10</span>）</el-col>
                        </el-row>
                    </el-col>
                    <el-col :xs="12" :sm="12" :lg="8">
                    </el-col>
                </el-row>
            </div>
            <!--运营快捷入口-->
            <div class="ec-dashboard--table mt-30">
                <h2 class="font16">运营快捷入口</h2>
                <div style="padding: 25px 0; display: flex; flex-direction: row">
                    <div class="ec-dashboard--flex">
                        <div class="ec-dashboard--icon">
                            <svg-icon icon-class="message" class-name="card-panel-icon" />
                        </div>
                        <div class="ec-dashboard--text">
                            添加商品
                        </div>
                    </div>
                    <div class="ec-dashboard--flex">
                        <div class="ec-dashboard--icon">
                            <svg-icon icon-class="message" class-name="card-panel-icon" />
                        </div>
                        <div class="ec-dashboard--text">
                            订单列表
                        </div>
                    </div>
                    <div class="ec-dashboard--flex">
                        <div class="ec-dashboard--icon">
                            <svg-icon icon-class="message" class-name="card-panel-icon" />
                        </div>
                        <div class="ec-dashboard--text">
                            用户管理
                        </div>
                    </div>
                    <div class="ec-dashboard--flex">
                        <div class="ec-dashboard--icon">
                            <svg-icon icon-class="message" class-name="card-panel-icon" />
                        </div>
                        <div class="ec-dashboard--text">
                            数据统计
                        </div>
                    </div>
                </div>
            </div>
            <!--商品总览/用户总览-->
            <el-row :gutter="32" class="mt-30">
                <el-col :xs="24" :sm="24" :lg="12">
                    <div class="ec-dashboard--table mt-30">
                        <h2 class="font16">商品总览</h2>
                        <div style="padding: 25px 0; display: flex; flex-direction: row; justify-content: space-between">
                            <div class="ec-dashboard--flex">
                                <div class="ec-dashboard--icon font24">
                                    <span class="color-red">100</span>
                                </div>
                                <div class="ec-dashboard--text mt-10">已下架</div>
                            </div>
                            <div class="ec-dashboard--flex">
                                <div class="ec-dashboard--icon font24">
                                    <span class="color-red">100</span>
                                </div>
                                <div class="ec-dashboard--text mt-10">
                                    已上架
                                </div>
                            </div>
                            <div class="ec-dashboard--flex">
                                <div class="ec-dashboard--icon font24">
                                    <span class="color-red">100</span>
                                </div>
                                <div class="ec-dashboard--text mt-10">
                                    库存紧张
                                </div>
                            </div>
                            <div class="ec-dashboard--flex">
                                <div class="ec-dashboard--icon font24">
                                    <span class="color-red">500</span>
                                </div>
                                <div class="ec-dashboard--text mt-10">
                                    全部商品
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="24" :lg="12">
                    <div class="ec-dashboard--table mt-30">
                        <h2 class="font16">用户总览</h2>
                        <div style="padding: 25px 0; display: flex; flex-direction: row; justify-content: space-between">
                            <div class="ec-dashboard--flex">
                                <div class="ec-dashboard--icon font24">
                                    <span class="color-red">100</span>
                                </div>
                                <div class="ec-dashboard--text mt-10">今日新增</div>
                            </div>
                            <div class="ec-dashboard--flex">
                                <div class="ec-dashboard--icon font24">
                                    <span class="color-red">100</span>
                                </div>
                                <div class="ec-dashboard--text mt-10">
                                    昨日新增
                                </div>
                            </div>
                            <div class="ec-dashboard--flex">
                                <div class="ec-dashboard--icon font24">
                                    <span class="color-red">100</span>
                                </div>
                                <div class="ec-dashboard--text mt-10">
                                    本月新增
                                </div>
                            </div>
                            <div class="ec-dashboard--flex">
                                <div class="ec-dashboard--icon font24">
                                    <span class="color-red">500</span>
                                </div>
                                <div class="ec-dashboard--text mt-10">
                                    会员总数
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <!--订单统计-->
            <div class="ec-dashboard--table mt-30">
                <h2 class="font16">订单统计</h2>
                <div>
                    <el-row :gutter="40" class="" type="flex" justify="center">
                        <el-col :xs="12" :sm="12" :lg="2" style="padding-top: 55px;border-right: 1px solid #ebeef5">
                            <div>
                                <p class="font14">本月订单总数</p>
                                <p class="font24 mt-10">1000</p>
                                <p class="font14 mt-10">
                                    <psan>10%</psan>同比上月
                                </p>
                            </div>
                            <div class="mt-30">
                                <p class="font14">本周订单总数</p>
                                <p class="font24 mt-10">1000</p>
                                <p class="font14 mt-10">
                                    <psan>10%</psan>同比上周
                                </p>
                            </div>
                        </el-col>
                        <el-col :xs="12" :sm="12" :lg="21" style="padding: 30px 20px 0;">
                            <line-chart :chart-data="lineChartData"/>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <!--销售统计-->
            <div class="ec-dashboard--table mt-30">
                <h2 class="font16">销售统计</h2>
                <div>
                    <el-row :gutter="40" class="" type="flex" justify="center">
                        <el-col :xs="12" :sm="12" :lg="2" style="padding-top: 55px;border-right: 1px solid #ebeef5">
                            <div>
                                <p class="font14">本月销售总额</p>
                                <p class="font24 mt-10">1000</p>
                                <p class="font14 mt-10">
                                    <psan>10%</psan>同比上月
                                </p>
                            </div>
                            <div class="mt-30">
                                <p class="font14">本周销售总额</p>
                                <p class="font24 mt-10">5000</p>
                                <p class="font14 mt-10">
                                    <psan>10%</psan>同比上周
                                </p>
                            </div>
                        </el-col>
                        <el-col :xs="12" :sm="12" :lg="21" style="padding: 30px 20px 0;">
                            <line-chart :chart-data="lineChartData"/>
                        </el-col>
                    </el-row>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import PanelGroup from './components/PanelGroup'
    import LineChart from './components/LineChart'
    const lineChartData = {
        newVisitis: {
            expectedData: [100, 120, 161, 134, 105, 160, 165],
            actualData: [120, 82, 91, 154, 162, 140, 145]
        }
    }
    export default {
        name: 'Dashboard',
        components: {
            PanelGroup,
            LineChart
        },
        data() {
            return {
                lineChartData: lineChartData.newVisitis
            }
        }

    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .ec-dashboard {
        padding: 32px;
        background-color: rgb(240, 242, 245);
        .chart-wrapper {
            background: #fff;
            padding: 16px 16px 0;
            margin-bottom: 32px;
        }
    }
    .ec-dashboard--table {
        background: #fff;
        border: 1px solid #ebeef5;

        h2 {
            padding: 15px 15px;
            font-weight: bold;
            border-bottom: 1px solid #ebeef5;
            background: #c3c3c3;
        }
        .ec-dashboard--row {
            padding: 0 25px;
            .el-row {
                border-bottom: 1px solid #ebeef5;
                padding: 12px 0;
                font-size: 15px;
            }
        }
    }
    .ec-dashboard--flex {
        width: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .card-panel-icon {
            color: #f4516c;
            font-size: 48px;
            margin-bottom: 10px;
        }
    }
</style>